<template>
	<view class="content">
			<uv-tabs style="width: 700rpx;" :line-color="'#0368FF'" :activeStyle="{
			color: '#0368FF',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
    	}"
		:inactiveStyle="{
			color: '#303133',
			transform: 'scale(1)'
		}"  :list="list" @change="click"></uv-tabs>
		<view class="plr15 pt15">
			<actItem  :datas="datalist"></actItem>
		</view>
			
			
	</view>
</template>

<script>
	import actItem from '../../components/actItem.vue'
	export default {
		components:{
			actItem
		},
		data() {
			return {
			
						
					list:[{
						name:'全部城市'
					}],
					datalist:[],
					city:""
			}
		},
		
		onReady() {
			// 模拟接口请求数据
			uni.showLoading({
				title: '加载中'
			})
			
		},
        onLoad(opt) {
			this.getArea()
			this.getList()
        
        },
		methods: {
			click(e){
					console.log(e)
					if(e.index==0){
						this.city=''
					}else{
						this.city=e.name
					}
					this.getList()
			},
			getArea(){
				this.$api.getCityList().then(res=>{
					console.log(res)
					res.data.map(item=>{
						this.list.push({
							name:item
						})
					})
					
				})
			},
            async getList(){
              const {data,code}  =     await this.$api.activityList({city:this.city })
              
              if(code==200){
                  this.datalist = data
              }
			  console.log(this.datalist)
            },
			change(index) {
               this.value = index;
               this.categoryId =this.list[index].id
               this.getList()
			},
            toactMain(item){
                uni.navigateTo({
                    url:'/pages/actMain/index?id='+item.id
                })
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 22rpx 20rpx 22rpx 32rpx;
        image{
            width: 124rpx;
            height: 164rpx;
            border-radius: 12rpx ;
            margin-right: 20rpx;
        }
		&-title {
			.text {
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 48rpx;
				
			}
		}
		&-content {
			
			.text {
				line-height: 36rpx;
				font-size: 24rpx;
				color: #9F9F9F;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
        &-price {
        	font-size: 24rpx;
        	color: #FF9012;
        	text {
        		font-size: 36rpx;
                line-height: 36rpx;
        	}
        }
	}
	.gap {
		padding: 0 30rpx;
	}
    .swiper{
        image{
            width:100%;
            height:300rpx;
        }
       
        
    }
</style>